<template>
    <div class="course__item">
        <div class="course__item-inner">
            <div class="course__thumb">
                <img :src="courseDetails.thumbnail" alt="course Images">
            </div>
            <div class="course__content">
                <div class="course__content-top">
                    <div class="course__author">
                        <nuxt-link to="/mentor-details"><img :src="courseDetails.avatar" alt="avatar">
                            {{ courseDetails.avatarName }}
                        </nuxt-link>
                    </div>
                    <div class="course__focus-inner">
                        <span>{{courseDetails.rating}}</span>
                        <img src="/images/course/star.png" alt="review-star">
                        <span>({{ courseDetails.ratingCount }})</span>
                    </div>
                </div>
                <h5> <nuxt-link to="/course-details">{{courseDetails.title}}</nuxt-link> </h5>
                <p>There are many variations of passages of Lorem Ipsum available, but the
                    majority have suffered alteration in some form.</p>
                <div class="course__content-footer">
                    <span><img src="/images/course/home4/1.svg" alt="icon"> {{ courseDetails.age }}</span>
                    <span><img src="/images/course/home4/2.svg" alt="icon"> ${{ courseDetails.price }}</span>
                    <span><img src="/images/course/home4/3.svg" alt="icon"> <a href="#">{{ courseDetails.class }} Class</a></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        courseDetails: {
            type: Object,
            default: () => { },
        },
    },

}
</script>

<style></style>